<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<script src="bootstrap/js/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>

	</head>

	<body>
		<div class="container">
			<div class="row">

				<div class="col-sm-12">
					<div class="container" style="text-align: center;">
						<div class="jumbotron">
							<form class="form-inline" role="form" onsubmit="return sub();" enctype="multipart/form-data" id="fileform" action="" method="post">

								<div class="form-group"> 
									<input type="file" name="file" id="file" required="required">
								</div>

								<button type="submit" class="btn btn-default">提交</button>
							</form>
						</div>
					</div>

					<table class="table table-striped">

						<thead>
							<tr>
								<th>名称</th>
								<th>类型</th> 
								<th style="width:150px;">保存路径</th>
								<th>下载</th>
							</tr>
						</thead>
						<tbody id="list">

						</tbody>
					</table>

				</div>

			</div>

		</div>
		<script type="text/javascript">
			var http_ = "http://localhost:8099"

			function sub() {

				var formdata = new FormData($("#fileform")[0]);

				$.ajax({
					type: 'post',
					url: http_ + "/file/upfile",
					data: formdata,
					cache: false,
					processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
					contentType: false, // 不设置Content-type请求头
					success: function(data) {
						alert('上传成功');
						getlist();
						$('#file').val('');
					},
					error: function() {

						alert('上传出错')
					}
				})

				return false;
			}

			getlist();

			function getlist() {
				$.ajax({
					type: 'post',
					url: http_ + "/file/list",
					success: function(data) {
						var s = '';
						for(var i = 0; i < data.length; i++) {
							var o = data[i];
							s += '<tr>'
									+'<td>原名称：' +o.oldname + '<br>现名称：'+o.newname + '<br>上传时间：'+o.cts+'</td>'
									+'<td>类型：' +o.ftype +'<br>后缀：'+o.format+ '<br>大小：'+o.size+'</td>'									 
									 
									+'<td>'+ o.fpath + '</td>'
									+'<td><a href="'+http_+'/file/downfile?id='+o.id+'" class="btn btn-info">下载</a></td>'
								+'</tr>';
						}
						$('#list').html(s);
					},
					error: function() {

						alert('请求出错了')
					}
				})
			}
		</script>
	</body>

</html>